课程介绍和学习方法

一、软件下载地址

http://soft.huruqing.cn

二、需要安装的工具

  1. vscode
  2. hbuilderx
  3. markman
  4. 飞秋
  5. 金山打字通
  6. nodejs
  7. git

三、vscode快捷键

  1. ctrl+b 隐藏(显示)侧边栏

  2. ctrl+enter 向下插入一行

  3. ctrl+tab 切换到上一个文件

  4. ctrl+p 快速查找文件

  5. ctrl+shift+f 在文件夹中搜索关键字

  6. alt+shift+向下箭头 向下复制行

  7. alt+shift+f 格式化内容

  8. ctrl+/ 注释

  9. ctrl+d 选择相同项

  10. alt+r 快速切换窗口(自定义快捷键)

  11. ctrl+j 合并成一行(自定义快捷键)

  12. tab代码向右缩进

  13. shift+tab代码向左缩进

四、vscode插件

(一) 常用插件

  1. Live Server 立即查看效果插件
  2. Prettier-code formatter 格式化插件
  3. Beautify 格式化插件
  4. Chinese(简体中文) vscode汉化插件
  5. Prettier - Code formatter 格式化插件
  6. jsx-beautify 格式化插件 快捷键ctrl+m
  7. live server 在浏览器中预览效果
  8. html preview 在vscode中预览效果
  9. vetur vue2插件
  10. volar vue3插件
  11. Simple React Snippets react片段插件
  12. jsx-beautify jsx格式化插件 快捷键ctrl+m

(二) react插件

(1) Simple React Snippets

  • imr 导入react
  • imrc 导入react和Component
  • cc 类组件
  • ccc 带Constructor的类组件
  • ren 渲染函数render
  • imrs 导入useState
  • imrse 导入useEffect
  • ffc 函数组件
  • cdm componentDidMount生命周期
  • ss setState
  • impc PureComponent

(2) JS JSX Snippets

  • imp import name from 'module';
  • imd import { } from 'module';
  • clg console.log()
  • rcc class component skeleton
  • rfc function component skeleton
  • useState useState block
  • useEffect useEffect block
  • useContext useContext block